<template>
    <div class="vous">
        <div class="voucherCon">
            <van-tabs v-model="active" title-active-color="red">
                <van-tab>
                    <template #title> 
                        <div>
                            <h3>白卡会员优惠券</h3>
                        </div>
                        <div>
                            <p>100元/月</p>
                            <!-- <span>白卡会员优惠券</span>
                            <p>100元/月</p> -->
                        </div>
                    </template>
                    <div class="voucherList">
                        <ul class="clearfix">
                            <li class="big" >
                                <h3>￥<em>50</em></h3> 
                                <div>满1299元使用</div> 
                                <p>50元优惠券</p> 
                            </li>
                            <li class="big" >
                                <h3>￥<em>30</em></h3> 
                                <div>满999元使用</div> 
                                <p>30元优惠券</p> 
                            </li>
                            <li>
                                <h3>￥<em>20</em></h3> 
                                <div>满299元使用</div> 
                                <p>10元优惠券</p> 
                            </li>
                            <li>
                                <h3>￥<em>5</em></h3> 
                                <div>满150元使用</div> 
                                <p>5元优惠券</p> 
                            </li>
                            <li>
                                <h3>￥<em>5</em></h3> 
                                <div>满99元使用</div> 
                                <p>5元优惠券</p> 
                            </li>
                        </ul>
                    </div>
                </van-tab>
                <van-tab v-for="index in 1" :key="index">
                    <template #title> 
                        <div>
                            <h3>红卡会员优惠券</h3>
                        </div>
                        <div>
                            <p>200元/月</p>
                        </div>
                    </template>
                    <div class="voucherList">
                        <ul class="clearfix">
                            <li class="big" >
                                <h3>￥<em>50</em></h3> 
                                <div>满1299元使用</div> 
                                <p>50元优惠券</p> 
                                <span>X2</span>
                            </li>
                            <li class="big" >
                                <h3>￥<em>30</em></h3> 
                                <div>满999元使用</div> 
                                <p>30元优惠券</p> 
                                <span>X2</span>
                            </li>
                            <li>
                                <h3>￥<em>20</em></h3> 
                                <div>满299元使用</div> 
                                <p>10元优惠券</p> 
                                <span>X2</span>
                            </li>
                            <li>
                                <h3>￥<em>5</em></h3> 
                                <div>满150元使用</div> 
                                <p>5元优惠券</p> 
                                <span>X2</span>
                            </li>
                            <li>
                                <h3>￥<em>5</em></h3> 
                                <div>满99元使用</div> 
                                <p>5元优惠券</p> 
                                <span>X2</span>
                            </li>
                        </ul>
                    </div>
                </van-tab>
            </van-tabs>
            <div class="voucherOperate">开通会员</div>
            <p>注：优惠券每月1日发放，仅当月有效</p>
        </div>
    </div>
</template>

<script>
export default {
    props:['vipvouchercon_data'],
    data(){
        return {
            active:0,
            foods : {}
        }
    },
    watch:{
        'vipvouchercon_data'(){
        }
    },
    mounted () {
        
        // console.log(1)
  
        // console.log(this.repeatstyle_data)
    }
}
</script>


<style lang="stylus">
.vous
    .voucherCon 
        margin: 0.2rem 0.1rem;
        background: #fff;
        border-radius: 0.07rem;
        overflow: hidden;
        .voucherList
            margin: 0.11rem 0.15rem 0.1rem;
            ul
                height 1.7rem
                li  
                    width 31%
                    float: left;
                    background: url(https://api.10street.cn/wap/images/card/card2019/voucher_big_bg.png)no-repeat 0 0/100% 100%;
                    text-align: center;
                    color: #5D4D31;
                    position: relative;
                    float: left;
                    margin: 0 2% 0.45rem 0;
                li.big
                    width: 48%;
                    margin-bottom 0.1rem
                    float: left;
                    background-image: url(https://api.10street.cn/wap/images/card/card2019/voucher_big_bg.png);  
                    h3 
                        font-size: 0.14rem;
                        margin-top: 0.1rem;
                        em 
                            font-size: 0.3rem;
                    div 
                        font-size: 0.15rem;
                    p 
                        font-size: 0.1rem;
                span
                    display: inline-block;
                    background: #ffe49a;
                    width: 0.2rem;
                    height: 0.15rem;
                    border-radius: 0.3rem 0 0 0.3rem;
                    line-height: 0.15rem;
                    position: absolute;
                    right: 0;
                    top: 0;
        .voucherOperate 
            margin: 0 0.1rem;
            line-height: 0rem;
            height: 0.4rem;
            background: linear-gradient(176deg, #ff6c65 0%, #ff534c 100%);
            border-radius: 0.95rem;
            text-align: center;
            font-size: 0.16rem;
            color: #fff;
            margin-top: 20px;
        p 
            font-size: 0.11rem;
            color: #999;
            text-align: center;
</style>


